<template>
  <button
    :type="type"
    :size="size"
    :class="btnClass"
    :style="btnStyle"
    @click="handleClick"
    :disabled="disabled"
  >
    <i></i>
    <span>
      <slot></slot>
    </span>
  </button>
</template>
<script>
import { oneOf } from "utils/index.js";
const prefixCls = "vbestui-button";
export default {
  name: "BButton",
  data() {
    return {
      prefixCls: prefixCls,
    };
  },
  props: {
    type: {
      validator(value) {
        return oneOf(value, [
          "default",
          "primary", //主要的
          "joker", //百搭
          "dashed", //虚线
          "text",
          "info",
          "success",
          "warning",
          "error",
        ]);
      },
      default: "default",
    },
    /**按钮尺寸 */
    size: {
      validator(value) {
        return oneOf(value, ["long", "large", "default", "small"]);
      },
      default: "default",
    },
    width: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "",
    },
    background: {
      type: String,
      default: "",
    },
    borderColor: {
      type: String,
      default: "",
    },
    fontSize: {
      type: String,
      default: "",
    },
    /**是否有圆弧 */
    round: {
      type: Boolean,
      default: false,
    },
    /**是否禁用按钮 */
    disabled: {
      type: Boolean,
      default: false,
    },
    /**是否幽灵按钮 */
    transparent: {
      type: Boolean,
      default: false,
    },
    /**是否为原型按钮 */
    circle: {
      type: Boolean,
      default: false,
    },
    /**禁用点击时滑动 */
    slidable: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    btnClass() {
      return [
        `${this.prefixCls}`,
        this.slidable
          ? `${this.prefixCls + "-click-slidable"}`
          : `${this.prefixCls + "-click"}`,
        `${this.prefixCls + "-type-" + this.type}`,
        `${this.prefixCls + "-size-" + this.size}`,
        this.round ? `${this.prefixCls + "-is-round"}` : "",
        this.transparent ? `${this.prefixCls + "-is-transparent"}` : "",
        this.circle ? `${this.prefixCls + "-is-circle"}` : "",
      ];
    },
    btnStyle() {
      return {
        color:
          this.color !== ""
            ? this.color
            : this.transparent
            ? `var(--${this.type})`
            : this.isTextColor
            ? "var(--text-color)"
            : `#fff`,
        width: this.width,
        height: this.height,
        backgroundColor: this.background,
        borderColor: this.borderColor || this.background,
        fontSize: this.fontSize,
      };
    },
    /**default、text使用默认颜色 */
    isTextColor() {
      return (
        this.type === "default" ||
        this.type === "text" ||
        this.type === "dashed"
      );
    },
  },
  methods: {
    handleClick() {
      // alert(this.type);
      this.$emit("click");
    },
  },
};
</script>